// 登录组件
import React, { useState } from "react";
import { Modal, Form, Input, Button, Upload, message } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import { userLogin } from "@/utils/front/index";
import { useDispatch } from "react-redux";
import { setUser, setLogin } from "@/store/modules/user";

interface LoginModalProps {
  visible: boolean;
  onCancel: () => void;
  onConfirm: () => void;
}

const LoginModal: React.FC<LoginModalProps> = ({
  visible,
  onCancel,
  onConfirm,
}) => {
  const [loading, setLoading] = useState(false);
  const dispatch = useDispatch();

  const onFinish = (values: any) => {
    console.log("Received values of form: ", values);

    setLoading(true);
    // 登录请求
    const data = {
      account: values.account,
      password: values.password,
      name: values.name,
      avatar:
        "https://img0.baidu.com/it/u=46505623,3598573663&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
    };

    userLogin(data).then((res: any) => {
      console.log("登录成功", res.data.token);
      const userInfo = {
        id: res.data.id,
        token: res.data.token,
        account: values.account,
        name: values.name,
        avatar:
          "https://img0.baidu.com/it/u=46505623,3598573663&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
      };
      dispatch(setUser(userInfo));
      dispatch(setLogin(true));
      setLoading(false);
      message.success("登录成功");
      onConfirm();
    });
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

  const beforeUpload = (file: File) => {
    console.log(file);

    // 检查上传的文件类型和大小等
    const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
    if (!isJpgOrPng) {
      message.error("请上传 JPG/PNG 格式的图片");
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error("图片大小不能超过 2MB");
    }
    return isJpgOrPng && isLt2M;
  };

  return (
    <Modal
      title="用户登录"
      open={visible}
      onCancel={onCancel}
      footer={null}
      maskClosable={false}
      destroyOnClose={true}
    >
      <Form
        name="loginForm"
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        layout="vertical"
      >
        <Form.Item
          label="账号"
          name="account"
          rules={[{ required: true, message: "请输入账号" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: "请输入密码" }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          label="用户名"
          name="name"
          rules={[{ required: true, message: "请输入用户名" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="上传头像"
          name="avatar"
          valuePropName="fileList"
          getValueFromEvent={(e: any) => {
            if (Array.isArray(e)) {
              return e;
            }
            return e && e.fileList;
          }}
          rules={[{ required: true, message: "请上传头像" }]}
        >
          <Upload beforeUpload={beforeUpload} maxCount={1} accept=".jpg,.png">
            <Button icon={<UploadOutlined />}>点击上传</Button>
          </Upload>
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" loading={loading}>
            登录
          </Button>
          <Button style={{ marginLeft: 8 }} onClick={onCancel}>
            取消
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default LoginModal;
